import React from 'react';
import { Container, Button } from 'react-bootstrap';
import { Transition } from '../react-transition-group';
//定义进场和离场动画的持续时间
const duration = 3000;
const defaultStyle = {
  opacity: 0.1,
  transition: `opacity ${duration}ms`
}
const transitionStyles = {
  entering: { opacity: 1 },//进场动画开始
  entered: { opacity: 1 },//进场动画开始
  exiting: { opacity: 0.1 },//进场动画开始
  exited: { opacity: 0.1 },//进场动画开始
}
function TransitionPage() {
  const [inProp, setInProp] = React.useState(false);
  return (
    <Container>
      <Transition in={inProp} timeout={duration}>
        {
          (status) => (
            <Button style={{ ...defaultStyle, ...transitionStyles[status] }}>
              {status}
            </Button>
          )
        }
      </Transition>
      <hr />
      <button onClick={() => setInProp(!inProp)}>{inProp ? 'hide' : 'show'}</button>
    </Container>
  )
}
export default TransitionPage;